<template>
  <div class="container">
    <div class="app-container">
      <!-- 第一部分 考勤设置及打卡范围查询 -->
      <div class="el-card__body">
        <div style="height:100%;  display: flex; justify-content: space-between;align-items: center;">
          <div>
            <div style="text-align: center;">
              <p style="    font-weight: 500;
    font-size: 18px;
    color: #2c2d3e; padding-bottom: 10px; ">未处理</p>
              0
            </div>

          </div>
          <div style="padding-right: 40px;">
            <el-button>打卡范围</el-button>
            <el-button type="primary">设置</el-button>
          </div>
        </div>
      </div>
      <!-- 第二部分 部门列表 -->
      <div class="el-card__body">
        <el-form inline style="width: 100%; padding: 10px;">
          <el-form-item style="width: 6%;text-align: right; 
    color: #606266; padding-right: 5px;font-weight: bold;">
            部门:
          </el-form-item>
          <el-form-item style="width: 80%;">
            <el-checkbox-group v-model="selectValue" @change="getAttendanceList">
              <el-checkbox v-for="item in departmentList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
            </el-checkbox-group>
          </el-form-item>

        </el-form>
      </div>
      <!-- 第三部分 考勤数据列表 -->
      <div class="el-card__body">
        <!-- 考勤数据表 -->
        <el-table :data="attendanceList" style="width: 1300px;"
          :header-cell-style="{ background: '#f5f6f8', color: '#606266', fontSize: '14px', fontWeight: 'bold' }"
          :cell-style="tableCellStyle">
          <el-table-column label="序号" prop="id" width="80px" align="center"></el-table-column>
          <el-table-column label="姓名" prop="username" width="100px" align="center"></el-table-column>
          <el-table-column label="工号" prop="workNumber" width="120px" align="center"></el-table-column>
          <el-table-column label="部门" prop="departmentName" width="120px" align="center"></el-table-column>
          <el-table-column label="手机" prop="mobile" width="120px" align="center"></el-table-column>
          <el-table-column v-for="(item, index) in attendanceList[0]?.attendanceRecord" :key="index" align="center"
            width="120px">
            <template #header>
              <span
                v-if="new Date(item.day.substring(0, 4) + '/' + item.day.substring(4, 6) + '/' + item.day.substring(6, 8)).getDay() === 0">
                {{ item.day.substring(4, 6) + "/" + item.day.substring(6, 8) + "(七)" }}

              </span>
              <span
                v-else-if="new Date(item.day.substring(0, 4) + '/' + item.day.substring(4, 6) + '/' + item.day.substring(6, 8)).getDay() === 6">
                {{ item.day.substring(4, 6) + "/" + item.day.substring(6, 8) + "(六)" }}

              </span>
              <span v-else>
                {{ item.day.substring(4, 6) + "/" + item.day.substring(6, 8) }}

              </span>

            </template>
            <template slot-scope="{row}">

              <!-- 弹出框  -->
              <el-popover placement="top-start" trigger="hover" :popper-style="{ minwidth: '300px', width: 'auto' }"
                open-delay="600">
                <div>
                  <!-- 卡片 -->
                  <el-card>
                    <div slot="header" class="clearfix">
                      <el-row style=" width: 400px;">
                        <el-col :span="20">{{ show_detailList.userName }}-{{
                          show_detailList.day }}-考勤记录</el-col>
                        <el-col :span="4" style="text-align: right;">
                          <el-tag :type="show_detailList.adtStatu === '正常' ? 'success' : 'warning'" size="mini">{{
                            show_detailList.adtStatu }}</el-tag>
                        </el-col>
                      </el-row>

                    </div>
                    <el-row style="height: 60px;">上班打卡时间：{{ show_detailList.adtInTime }}</el-row>
                    <el-row style="height: 60px;">上班打开地点：{{ show_detailList.adtInadd }}</el-row>
                    <el-row style="height: 60px;">下班打卡时间：{{ show_detailList.adtOutTime }}</el-row>
                    <el-row style="height: 60px;">下班打开地点：{{ show_detailList.adtOutadd }}</el-row>

                  </el-card>

                </div>

                <div @mouseenter="show_detail(row, index)" slot="reference" @click="sel_atdstatu(row, index)">{{
                  titleList[row.attendanceRecord[index].adtStatu] || "-" }}
                </div>
              </el-popover>
            </template>
          </el-table-column>


        </el-table>
        <!-- 分页设置器 -->
        <el-row type="flex" justify="center" align="middle" style="height: 60px;">

          <el-pagination layout="prev, pager, next" :total="parmas.total" :page-size="parmas.pagesize"
            :current-page="parmas.page" @current-change="handleCurrentChange">
          </el-pagination>

        </el-row>

      </div>
      <!-- 弹层：考勤状态设定与查询器 -->
      <el-dialog :visible.sync="showDialog" width="30%">
        <p slot='title' style="text-align: center;margin-bottom: 0;margin-top: 0px;">{{ updateAtdStatuList.day.substring(4, 6) + "/" +updateAtdStatuList.day.substring(6, 8) }}(实际工作日考勤方案)</p>
        <p style="color: red; margin-top: 0px;">注：统计考勤时，异常状态优先正常状态</p>
        <el-radio-group v-model="updateAtdStatuList.adtStatu" size="medium" style="margin-top: 20px;">
          <el-radio v-for="(item, index) in deal_data" :key="index" :label="item.value" style="padding: 5px;">
            {{ item.label }}
          </el-radio>



        </el-radio-group>
        <el-row slot="footer" type="flex">
          <el-col :span="16">
            <el-button type="primary" size="medium" @click="updateAtdStatu">确定</el-button>
            <el-button size="medium" @click="showDialog = false">取消</el-button>
          </el-col>
        </el-row>

      </el-dialog>

    </div>
  </div>
</template>
<script>
import { getAttendanceList, getAttendanceStatusList ,updateAttendanceStatus} from '@/api/attendance';
import { getDepartment} from '@/api/department';




export default {
  name: 'Attendance',
  data() {
    return {
      selectValue:[],
      departmentList: [],  // 部门列表
      parmas: {   // 分页参数
        total: 0,  // 总条数
        deptID: null, // 部门ID
        pagesize: 10, // 每页条数
        page: 1, // 当前页码
      },
      attendanceList: [],   // 部门考勤数据
      titleList: {          //考勤状态 显示
        1: "正常",
        2: "旷工",
        3: "迟到 ",
        4: "早退 ",
        5: "外出 ",
        6: "出差 ",
        7: "年假 ",
        8: "事假 ",
        9: "病假 ",
        10: "婚假 ",
        11: "丧假 ",
        12: "产假 ",
        13: "奖励产假 ",
        14: "陪产假 ",
        15: "探亲假 ",
        16: "工伤假",
        17: "调休 ",
        18: "产检假 ",
        19: "流产假 ",
        20: "长期病假",
        21: "补签 ",
        22: "休息",
      },
      show_detailList: {      //鼠标悬浮显示的数据
        userName: "",  // 用户名
        day: "", // 日期
        adtStatu: "", // 考勤状态
        adtInTime: "-", // 上班打卡时间
        adtOutTime: "-", // 下班打卡时间
        adtInadd: "-", // 上班打卡地点
        adtOutadd: "-", // 下班打卡地点
      },
      showDialog: false,
      attendanceStatusList: [], // 考勤状态列表

      updateAtdStatuList: {
        "userId": "",
        "day": "",
        "adtStatu": "",
        "departmentId": ""
      }

    }
  },
  computed: {
    deal_data() {
      return this.attendanceStatusList.map(item => {
        const key = Object.keys(item)[0]
        return {
          label: item[key],
          value: key
        }
      })

    }
  },
  created() {
    this.getAttendanceList();
    this.getDepartmentList();
  },

  methods: {
    // 获取考勤数据
    getAttendanceList() {
      this.parmas.deptID= this.selectValue.join(','); 
      getAttendanceList(this.parmas).then(res => {
        this.attendanceList = res.data.rows;
        this.parmas.total = res.data.total;

      })
    },
    // 考勤状态颜色设定
    tableCellStyle({ row, column, rowIndex, columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (row?.attendanceRecord[columnIndex - 5]?.adtStatu == 1) {

        return 'background:green; color: white; font-size: 14px; font-weight: bold;'
      }
      else if (row?.attendanceRecord[columnIndex - 5]?.adtStatu == 3) {

        return 'background:#e6a23c; color: white; font-size: 14px; font-weight: bold;'
      }
      else if (row?.attendanceRecord[columnIndex - 5]?.adtStatu == 2) {

        return ' color:red; font-size: 14px;'
      }
      else if (row?.attendanceRecord[columnIndex - 5]?.adtStatu == 22) {

        return 'color: gray; font-size: 14px;'
      }

    },
    // 分页时数据获取
    handleCurrentChange(val) {
      this.parmas.page = val;
      this.getAttendanceList();
    },
    // 鼠标悬浮显示考勤详情
    show_detail(row, index) {

      this.show_detailList.userName = row.username;
      this.show_detailList.day = row.attendanceRecord[index].day;
      this.show_detailList.adtStatu = this.titleList[row.attendanceRecord[index].adtStatu] || "-";
      this.show_detailList.adtInTime = row.attendanceRecord[index].adtInTime || "-";
      this.show_detailList.adtOutTime = row.attendanceRecord[index].adtOutTime || "-";
      // console.log(this.show_detailList);

    },
    // 表格单元格点击事件 打开弹窗
    sel_atdstatu(row, index) {
      this.showDialog = true;
      const parmas = {
        userId: row.userId,
      }
      getAttendanceStatusList(parmas).then(res => {

        this.attendanceStatusList = res;
        this.updateAtdStatuList.day = row.attendanceRecord[index].day;
        this.updateAtdStatuList.adtStatu = String(row.attendanceRecord[index].adtStatu);
        this.updateAtdStatuList.departmentId = row.departmentId;
        this.updateAtdStatuList.userId = row.userId;
        this.updateAtdStatuList.id = row.id;
      })


    },
    // 考勤状态修改
    updateAtdStatu() {
      updateAttendanceStatus(this.updateAtdStatuList).then(res => {
        this.$message.success("考勤状态修改成功");
        this.showDialog = false;
        this.getAttendanceList();

      })
    },
    //获取部门列表
    getDepartmentList() {
      getDepartment().then(res => {
        this.departmentList = res;
      })
    },

  },

}
</script>

<style scoped lang="scss">
.container {
  margin: 0;
  padding: 0;

}

.app-container {
  display: grid;
  grid-template-rows: 0.5fr 0.5fr 2fr;
  height: 100%;

  background: #f5f6f8;

  .el-card__body {
    margin: 10px;
    border-radius: 5px;
    background-color: white;
  }
}
</style>
